<template>
    <view>
        <!-- 登录 -->
        <view class="logo">
            <image src="/static/images/logo.png" />
        </view>

        <form @submit="formSubmit">
            <view class="title">用户名</view>
            <view class="text_section">
                <input placeholder="请输入您的用户名" name="username" placeholder-style="color:#999;" />
            </view>
            <view class="title">密码</view>
            <view class="text_section">
                <input placeholder="请输入登录密码" name="password" :type="open ? 'password' : 'text'" placeholder-style="color:#999;" class="password" />
                <image class="eye" :src="open ? '/images/eye-hidden.png' : '/images/eye-show.png'" @tap="show"></image>
            </view>
           <!-- <view class="title">验证码</view>
            <view class="text_section">
                <input placeholder="请输入验证码" name="code" placeholder-style="color:#999;" />
                <view class="login-captcha" @tap="changeCaptcha">
                    <image v-if="'captcha'" :src="captcha"></image>
                </view>
            </view> -->

            <view class="checkbox">
				
				
				<checkbox-group @change="changeStatus">
					<label>
						<checkbox value="cb" :checked="checkedOrNot" />
						我已阅读并同意
						<text>《服务协议》</text>
						和
						<text>《隐私政策》</text>
					</label>
					
				</checkbox-group>
								
                <!-- <checkbox value="cb" :checked="checkedOrNot" @change="changeStatus"></checkbox> -->
                
            </view>
            <button formType="submit" class="btn">登录</button>
            <view style="height: 100rpx"></view>
        </form>
    </view>
</template>

<script>
const app = getApp();
const $http = app.globalData.$http;
var config = require('../../utils/config.js');
export default {
    data() {
        return {
            picUrl: config.Config,
            username: '',
            password: '',
            code: '',
            captcha: '',
            uuid: '',
            open: true,
            btn: '',
			checkedOrNot:false,
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.changeCaptcha();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        show() {
            this.setData({
                open: !this.open
            });
        },
		
		changeStatus(){
			this.checkedOrNot = !this.checkedOrNot
		},

        formSubmit: function (e) {
            const that = this;
			// 新增条件判断：检查 checkedOrNot 是否为 true
			if (!that.checkedOrNot) {
				uni.showToast({
					title: '请先同意协议', // 提示信息可根据实际需求修改
					icon: 'none'
				});
				return; // 阻止后续登录流程
			}
            wx.login({
                success(res) {
					console.log('res.code：',res);
                    console.log('res.code：',res.code);
                    if (res.code) {
                        console.log('获取用户登录态成功：', res.code);
                        //发起网络请求
                        $http
                            .wxLogin({
                                code: res.code
                            })
                            .then((datas) => {
                                console.log('登录datas：', datas)
                                if (datas.code == 200) {
                                    uni.setStorageSync('openId', datas.data.openid);
                                    console.log('openId：',uni.getStorageSync('openId'));
                                    const data = {
                                        username: e.detail.value.username,
                                        password: e.detail.value.password,
                                        uuid: that.uuid,
                                        code: e.detail.value.code
                                    };
                                    console.log('调用goLogin：')
                                    that.goLogin(data);
                                } else {
                                    uni.showToast({
                                        title: datas.msg,
                                        icon: 'none'
                                    });
                                }
                            }).catch(err => {
                                // 新增：错误处理分支
                                console.error('$http.wxLogin请求失败（catch捕获）：', err);
                                console.log('错误类型：', err instanceof Error ? '系统错误' : '网络错误');
                                console.log('错误详情：', err.response || err.message);
                                
                                // 提示用户请求失败
                                uni.showToast({
                                    title: '网络请求失败，请稍后再试',
                                    icon: 'none'
                                });
                            });
                    } else {
                        console.log('登录失败！' + res.errMsg);
                    }
                }
            });
        },

        goLogin: function (data) {
			console.log('调用登录方法');
            const that = this;
            if (data.username == '') {
                uni.showToast({
                    title: '请输入用户名',
                    icon: 'none'
                });
            } else if (data.password == '') {
                uni.showToast({
                    title: '请输入密码',
                    icon: 'none'
                });
            }
			 // else if (data.code == '') {
    //             uni.showToast({
    //                 title: '请输入验证码',
    //                 icon: 'none'
    //             });
    //         }
            $http
                .goLogin({
                    username: data.username,
                    password: data.password,
                    uuid: that.uuid,
                    // code: data.code
                })
                .then((res) => {
                    if (res.code == 200) {
                        uni.setStorageSync('token', 'Bearer ' + res.token);
                        uni.showToast({
                            // title: res.msg,
							title: '登录成功',						
                            icon: 'success'
                        });
                        setTimeout(function () {
                            uni.reLaunch({
                                url: '/pages/index/index'
                            });
                        }, 1200);
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'error'
                        });
                    }
                });
        },

        changeCaptcha: function () {
            const that = this;
            $http.captchaImage({}).then((res) => {
                if (res.code == 200) {
                    that.setData({
                        captcha: `data:image/gif;base64,${res.img}`
                    });
                    that.setData({
                        uuid: res.uuid
                    });
                }
            });
        }
    }
};
</script>
<style>
/* pages/mine/mine.wxss */

.logo {
    width: 288rpx;
    height: 82rpx;
    margin: 150rpx auto 150rpx auto;
}

.logo image {
    width: 288rpx;
    height: 82rpx;
    display: block;
}

.title {
    width: 610rpx;
    font-size: 30rpx;
    font-weight: 900;
    color: #c1c7d0;
    margin: 30rpx auto 20rpx auto;
}

.text_section {
    width: 610rpx;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
}

.text_section input {
    width: 100%;
    height: 100rpx;
    color: #333;
    font-size: 28rpx;
    position: relative;
    z-index: 2;
    background-color: #f7f7f7;
    border-radius: 8rpx;
    padding: 20rpx;
    box-sizing: border-box;
}

.btn {
    width: 610rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    border-radius: 16rpx;
    background: #ff6e00;
    color: #fff;
    font-size: 36rpx;
    margin-top: 100rpx;
}

.checkbox {
    width: 610rpx;
    margin: 0 auto;
    font-size: 24rpx;
    margin-top: 20%;
    color: rgba(77, 77, 77, 0.91);
}

.checkbox text {
    color: #ff6e00;
}

checkbox .wx-checkbox-input {
    width: 30rpx;
    height: 30rpx;
    border-radius: 0;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    border-color: #797575;
    background-color: #fff;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    color: #ff6e00;
    font-size: 36rpx;
}

.login-captcha image {
    width: 220rpx;
    height: 84rpx;
    margin-left: 20rpx;
}

.eye {
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    top: 24rpx;
    right: 10rpx;
    z-index: 9999;
}
.text_section .password {
    padding-right: 75rpx;
}
</style>
